<template>
    <div class="flexBox">
        <div class="TransparentCard zkhBox">
            <div class="topCardFlex">
                <div class="topCardFlex_title">找客户</div>
                <div class="topCardFlex_gd" @click="customerListJump">更多>></div>
            </div>
            <div class="zkhContent">
                <el-tabs v-model="zkhParameterData.val" class="demo-tabs" @tab-click="zkhTabsfun">
                    <el-tab-pane v-for="item in sysBusinessSupplyDemandData" :key="item.id" :label="item.dictLabel"
                        :name="item.dictLabel">
                        <div class="zkulistBox">
                            <div class="zkulistfor" v-for="ite in lcEnterpriseInfosLoadKeHuNoData" :key="item.id">
                                <div class="zkulistfor_Text" style="width: 50%;">{{ ite.title }}</div>
                                <div class="huiText" style="width: 15%;">{{ ite.region_name }}</div>
                                <div class="huiText" style="width: 20%;">{{ ite.timeCountdown }}</div>
                                <div class="jsanBox">
                                    <el-popover class="box-item" title="联系电话" :content="ite.telPhone" placement="top">
                                        <template #reference>联系电话</template>
                                    </el-popover>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="TransparentCard zsjBox">
            <div class="topCardFlex">
                <div class="topCardFlex_title">找商家</div>
                <div class="topCardFlex_gd" @click="merchantListJump">更多>></div>
            </div>
            <div class="zkhContent">
                <el-tabs v-model="zsjParameterData.val" class="demo-tabs" @tab-click="zsjTabsfun">
                    <el-tab-pane v-for="item in sysProductTypeData" :key="item.id" :label="item.dictLabel"
                        :name="item.dictValue">
                        <div class="zsjlistBox">
                            <div class="zsjlistfor"
                                v-for="(item, index) in lcEnterpriseInfosLoadshopNoData"
                                :key="index">
                                <img class="zsjlistfor_Img" 
                                    :src="item.file_path == 'UpLoadFiles\\shop.png' ? `https://image.pollinations.ai/prompt/${item.product_name.split('、')[0]}` : store.imgfengMian + item.file_path" 
                                    alt="" loading="lazy" >
                                <div class="zsjforTitle">{{ item.product_name }}</div>
                                <div class="textflexBox">
                                    <div class="zsjforText">{{ item.enterprise_name }}</div>
                                    <div class="zsjforButton" @click="zsjDetails(item.product_Id)">了解详情</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    <div class="hsTitleMarginBox">
        <BlackTitleSlot title="热门企业">
            <template #nr>
                <div class="rmqyBox">
                    <div class="rmqyBox_Top">
                        <div class="rmqyBox_TopTitle">企业热榜</div>
                    </div>
                    <div class="rmqyBox_List">
                        <div class="rmqyBox_ListFor" v-for="(item, index) in enterpriseHotEnterpriseData" :key="index">
                            <div class="rmqyBox_ListXh">{{ index + 1 }}</div>
                            <div class="rmqyBox_Listnr">
                                <img class="rmqyBox_ListImg" 
                                :src="item.file_path == 'UpLoadFiles\\qiye.png' ? `https://image.pollinations.ai/prompt/公司大厦${item.id}` : store.imgfengMian + item.file_path" 
                                alt="" loading="lazy" >
                                <div>{{ item.name }}</div>
                            </div>
                            <div class="rmqyBox_ListRm">热</div>
                        </div>
                    </div>
                </div>
            </template>
        </BlackTitleSlot>
    </div>
    <div class="hsTitleMarginBox">
        <BlackTitleSlot title="入驻企业信息" :showMore="true" @more-click="rzqylistJump">
            <template #nr>
                <div class="rzqyCardBox">
                    <EnterpriseInformationList :qyList="rzqyxxData" />
                </div>
            </template>
        </BlackTitleSlot>
    </div>
</template>
<script setup>
import BlackTitleSlot from '@/components/general/BlackTitleSlot.vue';
import EnterpriseInformationList from '@/components/general/EnterpriseInformationList.vue';
import { lcEnterpriseInfosLoadKeHuNo, lcEnterpriseInfosLoadshopNo, queryEnterpriseList, enterpriseHotEnterprise } from '@/api/api.js';
import { sysProductType, sysBusinessSupplyDemand, sysRegion } from '@/api/dictionary.js';
import { timeCountdown } from '@/utils/time';
import { formatPhoneNumber } from '@/utils/phone';
import { ref, onMounted } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter();
import { useStore } from '@/store/store';
const store = useStore()
onMounted(() => {
    sysRegionfun() // 县区字典获取
    sysBusinessSupplyDemandfun() // 找客户供需类型获取
    sysProductTypefun() // 找商家商品类型获取
    enterpriseHotEnterprisefun() // 企业热榜
    queryEnterpriseListfun(); // 入驻企业信息
})
// 找客户数据需要的参数
const zkhParameterData = ref({
    pageNum: 1,
    pageSize: 4,
    val: '',
})
// 县区字典获取
const sysRegionData = ref([]);
const sysRegionfun = async () => {
    const res = await sysRegion()
    sysRegionData.value = res.data
}
// 找客户供需类型获取
const sysBusinessSupplyDemandData = ref([]);
const sysBusinessSupplyDemandfun = async () => {
    const res = await sysBusinessSupplyDemand()
    sysBusinessSupplyDemandData.value = res.data
    zkhParameterData.value.val = res.data[0].dictLabel; // 默认选中第一个
    lcEnterpriseInfosLoadKeHuNofun()
}
const lcEnterpriseInfosLoadKeHuNoData = ref([]);
// 找客户数据获取
const lcEnterpriseInfosLoadKeHuNofun = async () => {
    const res = await lcEnterpriseInfosLoadKeHuNo(zkhParameterData.value)
    lcEnterpriseInfosLoadKeHuNoData.value = res.data.map(item => {
        return {
            ...item,
            timeCountdown: timeCountdown(item.create_time),
            telPhone: formatPhoneNumber(item.telPhone)
        };
    })
}
// 找客户tabs切换
const zkhTabsfun = (tab) => {
    zkhParameterData.value.val = tab.props.name;
    lcEnterpriseInfosLoadKeHuNofun();
}
// 找商家商品类型获取
const zsjParameterData = ref({
    pageNum: 1,
    pageSize: 4,
    val: '',
})
const sysProductTypeData = ref([]);
const sysProductTypefun = async () => {
    const res = await sysProductType()
    sysProductTypeData.value = res.data
    zsjParameterData.value.val = res.data[0].dictValue; // 默认选中第一个
    lcEnterpriseInfosLoadshopNofun()
}
const lcEnterpriseInfosLoadshopNoData = ref([]);
const lcEnterpriseInfosLoadshopNofun = async () => {
    const res = await lcEnterpriseInfosLoadshopNo(zsjParameterData.value)
    lcEnterpriseInfosLoadshopNoData.value = res.data
}
// 找商家tabs切换
const zsjTabsfun = (tab) => {
    zsjParameterData.value.val = tab.props.name;
    lcEnterpriseInfosLoadshopNofun();
}
// 企业热榜
const enterpriseHotEnterpriseData = ref([]);
const enterpriseHotEnterprisefun = async () => {
    const res = await enterpriseHotEnterprise({
        page: 1,
        limit: 10,
    })
    enterpriseHotEnterpriseData.value = res.result
}
// 入驻企业信息
const rzqyxxData = ref([]);
const queryEnterpriseListfun = async () => {
    const res = await queryEnterpriseList({
        page: 1,
        limit: 5,
    })
    rzqyxxData.value = res.data.map(item => {
        return {
            ...item,
            logo: item.picture.find(a => a.attachment_type === 'LOGO')?.file_path || ''
        };
    })
}
// 客户列表
const customerListJump = () => {
    router.push({ path: '/customerList', query: { val: zkhParameterData.value.val } })
}
// 找商家详情
const zsjDetails = (id) => {
    router.push({ path: '/ProductDetails', query: { id } })
}
// 商家列表
const merchantListJump = () => {
    router.push({ path: '/supplyList', query: { val: zsjParameterData.value.val } })
}
const rzqylistJump = () => {
    router.push({ path: '/EnterpriseList' })
}
</script>
<style scoped lang="scss">
.flexBox {
    display: flex;
    align-items: center;
}

.TransparentCard {
    background: rgb(255, 255, 255, 0.6);
    border-radius: 6px;
    width: calc(50% - 10px); // 减去左右间距
    flex-shrink: 0;
    padding: 20px;
    height: 100%;
    min-height: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
        0 8px 16px rgba(0, 0, 0, 0.1); // 添加双层阴影增强立体感
}

.zkhBox {
    margin-right: 10px;
}

.zsjBox {
    margin-left: 10px;
}

.topCardFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topCardFlex_title {
    font-weight: bold;
    font-size: 20px;
    color: #1F1F1F;
}

.topCardFlex_gd {
    font-size: 16px;
    color: #333333;
    cursor: pointer;
}

.zkhContent {
    margin-top: 5px;

    .zkulistBox {}

    .zkulistfor {
        background: linear-gradient(90deg, #F2F7FF 0%, #FFFFFF 100%);
        border-radius: 4px;
        margin-top: 10px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
    }
}

.zkulistfor_Text {
    width: 200px;
    font-size: 14px;
    color: #1F1F1F;
    white-space: nowrap; // 禁止换行
    overflow: hidden; // 隐藏溢出内容
    text-overflow: ellipsis; // 显示省略号
    cursor: pointer;
}

.huiText {
    font-size: 14px;
    color: #888888;
    text-align: center;
}

.jsanBox {
    padding: 2px 10px;
    background: #F2F7FF;
    border-radius: 16px;
    font-size: 14px;
    color: #2B893A;
    flex-shrink: 0;
    margin-left: 20px;
    cursor: pointer;
}

.zsjlistBox {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    gap: 10px;

    .zsjlistfor {
        box-sizing: border-box;
        // padding: 6px;
        flex-shrink: 0;
        padding-bottom: 0;
        // width: 125px;
        width: 130px;

        .zsjlistfor_Img {
            // width: 125px;
            // height: 125px;
            width: 130px;
            height: 130px;
        }

        .zsjforTitle {
            font-size: 14px;
            color: #1F1F1F;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .textflexBox {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .zsjforText {
            font-size: 10px;
            color: #999999;
            width: 60%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; // 限制两行
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .zsjforButton {
            padding: 4px;
            background: $button-color;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
            flex-shrink: 0;
            cursor: pointer;
        }
    }
}

:deep(.el-tabs__item.is-active) {
    font-size: 16px; // 选中文字放大
    color: $green-color !important; // 使用项目主题色
}

:deep(.el-tabs__active-bar) {
    background-color: $button-color !important; // 改为绿色激活条
}

:deep(.el-tabs__item) {
    &:hover {
        color: $green-color; // 悬停颜色同步修改
    }
}

.hsTitleMarginBox {
    margin-top: 40px;
}

.rmqyBox {
    background: linear-gradient(180deg, #F2F2F2 0%, #FFFFFF 19%), #FFFFFF;
    border-radius: 8px;
    padding: 20px;

    .rmqyBox_Top {
        display: flex;
        align-content: center;
        justify-content: space-between;

        .rmqyBox_TopTitle {
            font-weight: bold;
            font-size: 18px;
            color: #1F1F1F;
        }
    }

    .rmqyBox_List {
        padding-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

        .rmqyBox_ListFor {
            width: 100%;
            padding: 16px 20px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            background: #FFFFFF;

            &:nth-child(4n+1),
            &:nth-child(4n+2) {
                background: #FFFAE8;
            }

            &:nth-child(4n+3),
            &:nth-child(4n+4) {
                background: #F2F7FF;
                /* 交替行颜色 */
            }

            .rmqyBox_ListXh {
                font-weight: bold;
                font-size: 18px;
                color: #DFAF00;
                flex-shrink: 0;
            }

            .rmqyBox_Listnr {
                display: flex;
                align-items: center;
                flex-grow: 1;
                margin-left: 20px;
                font-size: 14px;
                color: #1F1F1F;

                .rmqyBox_ListImg {
                    width: 40px;
                    height: 40px;
                    margin-right: 20px;
                }
            }

            .rmqyBox_ListRm {
                font-size: 14px;
                color: #F03B3B;
                flex-shrink: 0;
            }
        }
    }

}

.rzqyCardBox {
    // padding: 30px;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
}
</style>